<template>
  <div>
      <div id="map-con4" ref="mapCon4"></div>
  </div>
</template>

<script>
import Map from "ol/Map";
import Graticule from 'ol/layer/Graticule';
import OSM from 'ol/source/OSM';
import Stroke from 'ol/style/Stroke';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';
import {fromLonLat} from 'ol/proj';

export default {
    name: "graticule",
    data(){
        return {
            map: null
        }
    },
    created(){},
    mounted(){
        const map  = new Map({
            layers: [
                new TileLayer({
                    source: new OSM({
                        wrapX: false // Whether to wrap the world horizontally
                    })
                }),
                new Graticule({
                    strokeStyle: new Stroke({
                        color: 'rgba(255,120,0,0.9)',
                        width: 3,
                        lineDash: [0.5, 4]
                    }),
                    showLabels: true,
                    wrapX: false,
                })
            ],
            target: this.$refs.mapCon4,
            view: new View({
                center: fromLonLat([4.8, 47.75]),
                zoom: 5
            })
        });

        this.map = map;
    }
}
</script>

<style scope>
#map-con4 {
    height: 90vh;
}
</style>